<template>
  <div>
    <el-main>
      <el-form ref="searchForm" label-width="80px" :inline="true" size="small">
        <el-form-item>
          <el-input v-model="OrderCode" placeholder="请输入订单编号" @keyup.enter.native="selectOrderCode"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="selectOrderCode">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-select v-model="value" filterable placeholder="请选择供应商">
            <el-option v-for="item in options" :key="item.id" :label="item.supplierName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="supplierToOrder"> 确认 </el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh-right" @click="reStart">重置</el-button>
          <el-button type="success" icon="el-icon-plus" @click="OpenWindown">新增</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="OrderList" :height="tableHeight" border stripe style="width: 100%; margin-bottom: 10px">
        <el-table-column prop="orderCode" label="订单编号" width="100" align="center"></el-table-column>
        <el-table-column prop="orderName" label="商品名"></el-table-column>
        <el-table-column prop="orderNumber" label="订单数量"></el-table-column>
        <el-table-column prop="money" label="价格/单"></el-table-column>
        <el-table-column label="是否完成订单">
          <template slot-scope="scope">
            {{scope.row.orderEnd==true?"已完成":'未完成'}}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="290">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" type="primary" size="small" @click="Hedit(scope.row)">编辑</el-button>
            <el-button icon="el-icon-delete" type="danger" size="small" @click="Hdelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="pageNo" :page-sizes="[5, 6,7, 8, 9]" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">

      </el-pagination>

    </el-main>

    <!-- 添加和修改 -->
    <system-dialog :title="Dialog.title" :visible="Dialog.visible" :width="Dialog.width" :height="Dialog.height"
      @onClose="onClose" @onConfirm="onConfirm">
      <div slot="content">
        <el-form :model="Order" ref="SupplierForm" :rules="rules" label-width="80px" :inline="false" size="small">
          <el-form-item label="订单编号" prop="orderCode"><el-input v-model="Order.orderCode">?</el-input></el-form-item>
          <el-form-item label="商品名" prop="orderName"><el-input v-model="Order.orderName"></el-input></el-form-item>
          <el-form-item label="订单数量" prop="orderNumber"><el-input v-model="Order.orderNumber"></el-input></el-form-item>
          <el-form-item label="价格/单" prop="money"><el-input v-model="Order.money"></el-input></el-form-item>
          <el-form-item label="供应商id" prop="supId"><el-input v-model="Order.supId"></el-input></el-form-item>
          <el-form-item v-if="!Order.id == ''" label="是否完成" prop="orderEnd">
            <el-radio v-model="Order.orderEnd" :label='true' border>已完成</el-radio>
            <el-radio v-model="Order.orderEnd" :label='false' border>未完成</el-radio>
          </el-form-item>
        </el-form>
      </div>
    </system-dialog>



  </div>
</template>

<script>
  import Sapi from "@/api/supplier"
  import Oapi from "@/api/Order"
  import SystemDialog from '@/components/system/SystemDialog.vue'

  export default {
    name: 'OrderList',
    components: {
      SystemDialog
    },
    data() {
      return {

        rules: {
          orderCode: [{
            required: true,
            trigger: 'blur',
            message: '请输入订单号'
          }],
          orderName: [{
            required: true,
            trigger: 'blur',
            message: '请输入订单名'
          }],
          orderNumber: [{
            required: true,
            trigger: 'blur',
            message: '请输入订单量'
          }],
          money: [{
            required: true,
            trigger: 'blur',
            message: '请输入价格'
          }],
          supId: [{
            required: true,
            trigger: 'blur',
            message: '请输入供应商id'
          }]
        },

        total: 0,
        pageNo: 1,
        pageSize: 5,
        //选择器值
        options: [],
        value: '',

        //订单编号
        OrderCode: '',

        tableHeight: 0,

        //表格数据
        OrderList: [],

        //窗口属性
        Dialog: {
          height: 300,
          width: 600,
          visible: false,
          title: ''
        },

        Order: {
          id: '',
          orderCode: '',
          orderName: '',
          orderNumber: '',
          supId: '',
          money: '',
          orderEnd: 0,
          isDelete: 0,
        },
        searchModel: {
          pageNo: 1,
          pageSize: 5,
        }

      }
    },

    methods: {

      //窗口确定
      onConfirm() {
        this.$refs.SupplierForm.validate(async (valid) => {

          if (valid) {
            let res = null;
            if (this.Order.id == '') {
              res = await Oapi.addOrder(this.Order)
            } else {
              res = await Oapi.editOrder(this.Order)
            }


            if (res.success) {
              this.$message.success(res.message);
              this.search()
              this.Dialog.visible = false;
            } else {
              this.$message.error(res.message)
            }
          }


        })
      },

      //改变页数
      handleCurrentChange(page) {
        this.pageNo = page
        this.search()
      },

      //改变分页条数
      handleSizeChange(size) {
        this.pageSize = size
        this.search()
      },

      //Edit
      Hedit(row) {
        this.$objCopy(row, this.Order),
          this.Dialog.title = "编辑"
        this.Dialog.visible = true
      },
      async Hdelete(row) {
        let confirm = await this.$myconfirm('确定要删除该数据吗?')
        let res = await Oapi.delOrder(row.id)

        if (res.success) {
          this.$message.success("成功")
          this.search()
        } else {
          this.$message.error("错误")
        }





      },

      //重置
      reStart() {
        this.search()
        this.OrderCode = ""
        this.value = ""
      },

      //根据供应商查询
      async supplierToOrder() {
        if (this.value != '') {
          let res = await Oapi.selectBySupplier(this.value)

          if (res.success) {
            this.$message.success(res.message)
            this.OrderList = res.data

          } else {

            this.$message.error(res.message)
          }

        } else {
          this.$message.error("查找内容不为空")
        }
      },

      //单查询
      async selectOrderCode() {
        if (this.OrderCode != '') {
          let res = await Oapi.selectByCode(this.OrderCode)
          if (res.success) {
            this.OrderList = res.data
          }
        } else {
          this.$message.error("查找内容不为空")
        }

      },

      //打开添加窗口
      OpenWindown() {
        this.$resetForm("roleForm", this.Order);
        this.Dialog.title = "新增"
        this.Dialog.visible = true

      },

      //窗口关闭
      onClose() {
        this.Dialog.visible = false
      },

      //查询列表
      async search() {
        this.searchModel.pageNo = this.pageNo
        this.searchModel.pageSize = this.pageSize
        let res = await Oapi.selectOrderListPage(this.searchModel)
        if (res.success) {
          this.OrderList = res.data.records
          this.total = res.data.total
        }
      },

      async supplierList() {
        let res = await Sapi.getListAll()
        if (res.success) {
          this.options = res.data
        }
      },
    },



    created() {
      this.search()
      this.supplierList()
    },
    mounted() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 220
      })
    }

  }
</script>

<style>
</style>
